<template>
  <div>
    <el-select v-model="typename" clearable="true" placeholder="商品类别" style="margin-left:500px">
      <el-option
        v-for="item in types"
        :key="item"
        :label="item"
        :value="item">
      </el-option>
    </el-select>

    <el-select v-model="supplier" clearable="true" collapse-tags style="margin-right:auto;" placeholder="供货商">
      <el-option
        v-for="item in suppliers"
        :key="item"
        :label="item"
        :value="item">
      </el-option>
    </el-select>

    <el-button type="primary" icon="el-icon-search" @click="getInfo">搜索</el-button>

    <el-table
      :data="tableData"
      :summary-method="getSummaries" show-summary
      style="width: 100%"
      height="520px">
      <el-table-column
        fixed
        prop="goodsId"
        label="商品id"
        width="150">
      </el-table-column>
      <el-table-column
        prop="goodsType"
        label="商品名称"
        width="120">
      </el-table-column>

      <el-table-column
        prop="goodsJoinTime"
        label="入库时间"
        width="200">
      </el-table-column>
      <el-table-column
        prop="goodsSuppliersName"
        label="供货商"
        width="130">
      </el-table-column>
      <el-table-column
        prop="goodsUserName"
        label="入库人"
        width="130">
      </el-table-column>
      <el-table-column
        prop="goodsPrice"
        label="商品价格"
        width="150">
      </el-table-column>
      <el-table-column
        prop="goodsNums"
        label="商品数量"
        width="200">
      </el-table-column>
    </el-table>

    <el-pagination
      background
      layout="prev, pager, next"
      :page-size="10"
      @current-change="page"
      :total="88">
    </el-pagination>
   </div>
</template>

<script>
import axios from 'axios'

  export default {
    created() {
      const _this = this

      axios.all([axios.get('http://localhost:8080/user/sgoods?current=1&size=10'),
                 axios.get('http://localhost:8080/user/types'),
                 axios.get('http://localhost:8080/user/goodsSuppliers')])
            .then(axios.spread((res1,res2,res3) => {
                  _this.tableData = res1.data.data.goods
                  _this.types = res2.data.data
                  _this.suppliers = res3.data.data
      }))
    },
    data(){
      return {
        types:[{
          id:1,
          name:'玩具'
        },
          {
            id:2,
            name:'牛奶'
          }
        ],

        suppliers:[
          {
            id:1,
          name:'admin'
        },
          {
            id:2,
            name:'牛奶'
          }

        ],

        tableData: [{
          goodsId:null,
				  goodsJoinTime:null,
				  goodsNums:null,
				  goodsPrice:null,
				  goodsSuppliersName:null,
				  goodsType:null,
				  goodsUserName:null
        }
    ],
        typename:'',
        supplier:'',
      }
    },
    methods:{
      getInfo(event){
        const _this = this
        this.$http.get('http://localhost:8080/user/sgoods?current=1&size=6',{params:{type:this.typename,suppliersName:this.supplier}})
        .then(function(resp){
           _this.tableData = resp.data.data.goods
        })
      },
      page(currentPage){
        const _this = this
        this.$http.get('http://localhost:8080/user/sgoods',{params:{current:currentPage,size:10,type:this.typename,suppliersName:this.supplier}})
        .then(function(resp){
           _this.tableData = resp.data.data.goods
        })
      },
    }
  }
</script>
